<template>
	<view class="overlay" v-show="isVisible">
		<view class="address-window">
			<view class="window-header">
				<text class="title">选择地址</text>
				<uni-icons type="close" size="20" @click="closeWindow"></uni-icons>
			</view>
			<view class="address-list">
				<view v-for="(address, index) in addresses" :key="index" class="address-item"
					@click="selectAddress(address)">
					<view class="address-details">
						<uni-icons type="location" size="25" color="#ffd427"></uni-icons>
						<text class="address">{{ address.address }}</text>
						<text class="name">{{ address.name }}</text>
						<text class="phone">{{ address.phone }}</text>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			addresses: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				isVisible: false
			};
		},
		methods: {
			show() {
				this.isVisible = true;
			},
			closeWindow() {
				this.isVisible = false;
				this.$emit('close');
			},
			selectAddress(address) {
				this.$emit('select', address);
				this.isVisible = false;
			}
		}
	}
</script>

<style scoped>
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
		z-index: 9998;
	}

	.address-window {
		width: 100%;
		height: 40%;
		/* 设置弹窗的高度，可以根据需要调整 */
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* 固定在底部 */
		background-color: #fff;
		/* 设置背景色为白色 */
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10px;
		z-index: 9999;
		box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: transform 0.3s ease;
		/* 平滑过渡效果 */
		transform: translateY(0);
		/* 默认显示位置 */
	}

	.address-window .window-header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.address-window .title {
		text-align: center;
		flex-grow: 1;
		/* 使标题占据额外空间 */
	}

	.address-window .address-list {
		background-color: #fff;
		width: 100%;
		max-height: calc(100% - 60px);
		/* 确保列表部分不会超出弹窗 */
		overflow-y: auto;
		padding: 10px 0;
	}

	.address-item {
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address-item:last-child {
		border-bottom: none;
	}

	.name,
	.phone,
	.address {
		margin-bottom: 5px;
	}
</style>